<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加研报</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="/css/global.css" media="all">
<link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/table.css" />
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/js/global-config.js"></script>
<script charset="utf-8" src="/plugins/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="/plugins/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="/plugins/kindeditor/plugins/code/prettify.js"></script>
<script charset="utf-8" src="/js/kindEditor.js"></script>
<style>
.layui-form-label {
	width: 10%;
}

.layui-input-block {
	margin-left: 13%;
}

img {
	width: 120px;
	height: 120px;
}

.layui-upload-list {
	margin-left: 13%;
}
</style>
</head>
<body>
	<div style="margin: 15px;">
		<fieldset class="layui-elem-field layui-field-title"
			style="margin-top: 20px;">
			<legend>
				添加研报(<label class="layui-required-tip">标红的为必填项</label>)
			</legend>
		</fieldset>
		<form class="layui-form" id="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label layui-required-tip">频道:</label>
				<div class="layui-input-block">
					<select id="channelsId" name="channelsId" class="layui-input" lay-verify="required" style="padding: 0px 20px;" required></select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">web标题:</label>
				<div class="layui-input-block">
					<input type="text" id="title" name="title" maxlength="50" placeholder="web标题"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">app标题:</label>
				<div class="layui-input-block">
					<input type="text" id="appTitle" name="appTitle" maxlength="50" placeholder="app标题"
						   autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label layui-required-tip">作者名称:</label>
				<div class="layui-input-block">
					<input type="text" id="authorName" name="authorName" maxlength="20" lay-verify="required" placeholder="作者名称"
						   autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">内容摘要:</label>
				<div class="layui-input-block">
					<textarea id="contentSummary" lay-verify="textlength" maxlength="1000" name="contentSummary" placeholder="请输入内容摘要"
						class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label layui-required-tip">内容:</label>
				<div class="layui-input-block">
					<textarea id="txtEditor" name="content" id="content" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">标签:</label>
				<div class="layui-input-block" id="label"></div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">上传文档:</label>
				<div class="layui-input-block">
					<button type="button" class="layui-btn" id="btnFile">
						<i class="layui-icon">&#xe67c;</i>上传文档
					</button>
					<input type="hidden" id="filePath" name="filePath" class="layui-input">
				</div>
				<div class="layui-upload-list">
        
            <p  class="layui-word-aux"> <span id="fileTips" style="color: red"></span></p>
           </div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">Web封面:</label>
				<div class="layui-input-block">
					<button type="button" class="layui-btn" id="btnwebUrl">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
				</div>
				<div class="layui-upload-list">
					<img class="layui-upload-img" id="imgwebUrl">
					<input type="hidden" id="webImgUrl" name="webImgUrl" class="layui-input">
					<p id="webdemoText" class="layui-word-aux">图片大小≤2M，支持JPG、PNG、JPEG</p>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">App封面:</label>
				<div class="layui-input-block">
					<button type="button" class="layui-btn" id="btnappUrl">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
				</div>
				<div class="layui-upload-list">
					<img class="layui-upload-img" id="imgappUrl">
					<input type="hidden" id="appImgUrl" name="appImgUrl" class="layui-input">
					<p id="appdemoText" class="layui-word-aux">图片大小≤2M，支持JPG、PNG、JPEG</p>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">发布时间:</label>
				<div class="layui-input-block">
					<input type="radio" name="sendType" value="0" lay-filter="pub-time" title="立即" checked="checked" />
					<input type="radio" name="sendType" value="1" lay-filter="pub-time" title="定时" />
					<div id="publish-time" class="layui-inline">
						<input class="layui-input" name="timingTime"
							placeholder="默认采用当前时间"
							onclick="layui.laydate.render({elem: this,min:0,type: 'datetime',show: true,closeStop: this, format: 'yyyy-MM-dd HH:mm:ss'})">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label layui-required-tip">发布平台:</label>
				<div class="layui-input-block" id="publishPlatform">
					<input type="checkbox" name="publishPlatform" value="1" title="Web"/>
					<input type="checkbox" name="publishPlatform" value="2" title="App"/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label layui-required-tip">是否发布push:</label>
				<div class="layui-input-block">
					<input type="radio" name="publishPush" value="1" title="是"/>
					<input type="radio" name="publishPush" value="0" title="否" checked/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否置顶:</label>
				<div class="layui-input-block">
					<input type="radio" name="setTop" value="1" title="是"/>
					<input type="radio" name="setTop" value="0" title="否" checked/>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="save" id="save">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					<a href="javascript:history.back();" class="layui-btn">返回</a>
				</div>
			</div>
		</form>
	</div>
	<script>
    layui.use(['jquery','table','laydate','layer','form','util','layedit','upload','element'],function(){
        var $=layui.jquery,table=layui.table,laydate = layui.laydate,
            layer = layui.layer,form = layui.form,util=layui.util,
            layedit=layui.layedit,upload = layui.upload;

        //初始化kindeditor编辑器
        var keditor=initEditor("txtEditor");

        //时间选择器
        var start = {
            max: '2099-06-16 23:59:59',
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
			min:util.toDateString(new Date().toString(), 'yyyy-MM-dd HH:mm:ss')
        };
        $('#timingTime').on('click',function (){
            start.elem = this;
            laydate.render(start);
        });

        form.on('radio(pub-time)',function (data) {
            showHide("publish-time", data.value == "1");
        });

        showHide("publish-time",false);
        
        function showHide(id, show) {
            var str = "#"+id;
            if (show){
                $(str).show();
            }else{
                $(str).hide();
            }
        }

        //下拉框
        loadSelect();
        function loadSelect(){
            $.ajax({
                url:"/manage/research/selchannlList",
                type:"get",
                dataType:"json",
                success:function(data){
                    var root = document.getElementById("channelsId");
                    for(var i=0;i<data.length;i++){
                        var option = document.createElement("option");
                        option.setAttribute("value",data[i]["id"]);
                        option.innerHTML = data[i]["name"];
                        root.append(option);
                        form.render("select");
                    }
                }
            });
        }

        //标签复选框
        loadLabel();
        function loadLabel(){
            $.ajax({
                url:"/manage/research/sellabelList",
                type:"get",
                dataType:"json",
                success:function(data){
                    var div = document.getElementById("label");
                    var chkinfo;
                    for(var i=0;i<data.length;i++){
                        chkinfo = document.createElement("input");
                        chkinfo.name = "labelList";
                        chkinfo.type = "checkbox";
                        chkinfo.title = data[i]["name"];
                        chkinfo.value = data[i]["id"];
                        chkinfo.setAttribute("lay-skin","primary");//原始风格
                        div.appendChild(chkinfo);
                        form.render("checkbox");
                    }
                }
            });
        }

        //验证
        form.verify({
            textlength:function(value, item){
                if(value.length > 1000){
                    layer.msg("内容摘要上限1000字", { icon: 2, shift: 6 })
                }
            }
        });
        
      //文件上传
        var uploadInst = upload.render({
      	    elem: '#btnFile',
      	    url: '/manage/upload/uploadFile',
      	    size:'20480',
      	    exts:'docx|doc|pdf|xls|xlsx',
      	    before: function(obj) {
      	        //预读本地文件示例，不支持ie8
      	        obj.preview(function(index, file, result) {
      	            //$('#imgPictureUrl').attr('src', result); //图片链接（base64）
      	        });
      	      layer.load();
      	    },
      	    done: function(res) {
      	        //上传成功
      	        if (res.code == 0) {
      	            $("#filePath").val(res.data["key"]);
      	            $("#fileTips").text("文档上传成功!");
      	            layer.closeAll('loading');
      	        }
      	    },
      	    error: function() {
      	        //演示失败状态，并实现重传
      	        var demoText = $('#demoText');
      	        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs file-reload">重试</a>');
      	        demoText.find('.file-reload').on('click',
      	        function() {
      	            uploadInst.upload();
      	        });
      	    }
      	});
      
      //WEB图片上传
        var uploadInst2 = upload.render({
      	    elem: '#btnwebUrl',
      	    url: '/manage/upload/uploadFile',
      	    size:'2048',
      	    exts:'jpg|png|jpeg',
      	    before: function(obj) {
      	        //预读本地文件示例，不支持ie8
      	        obj.preview(function(index, file, result) {
      	            $('#imgwebUrl').attr('src', result); //图片链接（base64）
      	        });
      	      layer.load();
      	    },
      	    done: function(res) {
      	        //上传成功
      	        if (res.code == 0) {
      	            $("#webImgUrl").val(res.data["key"]);
      	         	layer.closeAll('loading');
      	        }
      	    },
      	    error: function() {
      	        //演示失败状态，并实现重传
      	        var demoText = $('#webdemoText');
      	        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs file-reload">重试</a>');
      	        demoText.find('.file-reload').on('click',
      	        function() {
      	            uploadInst2.upload();
      	        });
      	    }
      	});
        //APP图片上传
        var uploadInst3 = upload.render({
            elem: '#btnappUrl',
            url: '/manage/upload/uploadFile',
            size:'2048',
            exts:'jpg|png|jpeg',
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#imgappUrl').attr('src', result); //图片链接（base64）
                });
                layer.load();
            },
            done: function(res) {
                //上传成功
                if (res.code == 0) {
                    $("#appImgUrl").val(res.data["key"]);
                    layer.closeAll('loading');
                }
            },
            error: function() {
                //演示失败状态，并实现重传
                var demoText = $('#appdemoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs file-reload">重试</a>');
                demoText.find('.file-reload').on('click',
                    function() {
                        uploadInst2.upload();
                    });
            }
        });

            //表单提交
            form.on('submit(save)', function(data){
            	if(keditor.count('text') == 0||keditor.count('html') == 0){
                    layer.msg("请输入文章内容！", {icon: 5, shift: 6});
                    keditor.focus();
                    return false;
                }
                var publishPlatform = ''
				if($('#publishPlatform input:checkbox:checked').length == 0){
                    layer.msg("请选择发布平台！", {icon: 5, shift: 6});
                    return false;
				}
                $.each($('#publishPlatform input:checkbox:checked'),function(){
                    publishPlatform+=$(this).val()+";";
                });
                data.field.publishPlatform = publishPlatform;

				if(publishPlatform.indexOf('1')!=-1 && publishPlatform.indexOf('2')!= -1){
                    if(data.field.title==''){layer.msg("请填写web标题！", {icon: 5, shift: 6});return false;}
                    if(data.field.webImgUrl==''){layer.msg("请上传web封面！", {icon: 5, shift: 6});return false;}
                    if(data.field.appTitle==''){layer.msg("请填写app标题！", {icon: 5, shift: 6});return false;}
                    if(data.field.appImgUrl==''){layer.msg("请上传app封面！", {icon: 5, shift: 6});return false;}
				}else if(publishPlatform.indexOf('1')!=-1){
            	    if(data.field.title==''){layer.msg("请填写web标题！", {icon: 5, shift: 6});return false;}
                    if(data.field.webImgUrl==''){layer.msg("请上传web封面！", {icon: 5, shift: 6});return false;}
                    data.field.appTitle==null;
                    data.field.appImgUrl==null;
                }else if(publishPlatform.indexOf('2')!= -1) {
                    if(data.field.appTitle==''){layer.msg("请填写app标题！", {icon: 5, shift: 6});return false;}
                    if(data.field.appImgUrl==''){layer.msg("请上传app封面！", {icon: 5, shift: 6});return false;}
                    data.field.title==null;
                    data.field.webImgUrl==null;
				}

                if(data.field.sendType==1 && data.field.timingTime ==''){
                    layer.msg("请上填写发布时间！", {icon: 5, shift: 6});
                    return false;
                }

                if(data.field.publishPush ==''||data.field.publishPush ==null){
                    layer.msg("请选择是否发布push！", {icon: 5, shift: 6});
                    return false;
				}
                    layer.confirm('确认要提交吗？', {
                        btn : [ '确定', '取消' ]//按钮
                    }, function(index) {
                        //同步编辑器内容到原来textarea
                        keditor.sync('#txtEditor');
                        data.field.content=keditor.html();
                        var labels="";
                        $.each($('#label input:checkbox:checked'),function(){
                            labels+=$(this).val()+";";
                        });
                        data.field.labelList=labels;
                        $.ajax({
                            url:"/manage/research/saveResearchReport",
                            type:"post",
                            data:data.field,
                            dataType:"json",
                            success:function (data) {
                            	layer.alert(data.msg, {
                        		    skin: 'layui-layer-molv' //样式类名  自定义样式
                        		    ,closeBtn: 1    // 是否显示关闭按钮
                        		    ,anim: 1 //动画类型
                        		    ,btn: ['确定'] //按钮
                        		    ,icon: data.code>=0?1:2    // icon
                        		    ,yes:function(index){
                        		    	if (data.code >= 0) {
                        	                  location.href = "/manage/research/researchReportList";
                        	              }else{
                        	            	  layer.close(index);
                        	              }
                        		    }
                            	});
                            }
                        })
                    });
                    return false;
            });
    })
</script>
</body>
</html>